<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-upper-text="message">xxxxxxxxxx</p>
        自动获取焦点： <input type="text" v-focus>
    </div id="app">
    <div id="app2">
        自动获取焦点： <input type="text" v-focus>
        <p v-upper-text="msg">xxxxxxxxxx</p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令
        // 第一个参数为指令名，但不要有v-开头
            Vue.directive('upper-text',{
            // 一般对样式的操作在bind中，bind函数只调用一次
            bind: function(el) {
                el.style.color = 'red'
            }, 
            // 一般对js操作在inserted中,也是只调用一次
            //el是当前指令作用的DOM元素，
            // binding 用于获取使用了当前指令的绑定值(value)、表达式(expression).指令名(name)等  
            inserted: function (el, binding){
                //将所有字母文本内容转换为大写
                el.innerHTML = binding.value.toUpperCase()
            }
        })

        new  Vue({
            el: '#app',
            data: {
                message: 'lz, 陪你学习，伴你成长'
            },
            //注册局部的自定义指令,只能在当前Vue实例管理的入口下引用这个实例
            directives: {
                'focus': { //指令名
                // 刷新页面自动获取焦点
                    inserted: function (el,binding) {
                        // 被v-focus 作用的那个元素在刷新后会自动获取焦点 
                        el.focus()
                    }
                }
            }
        })

        new Vue({
            el: '#app2',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>
</html>